<template>
    <page class="white-bg">
        <div class="px14 py16 white-bg">
            <p class="f20" flex="main:justify">{{form.card}}<span class="c2 f16" v-back="'petCard'">切换账号</span></p>
            <p class="f16 text3 mt10">{{shopName}}</p>
        </div>
        <div class="pt14 bg-main1"></div>
        <label class="h60 px14 white-bg bdb" flex>
            <span class="f16 mr40">充值金额</span>
            <input class="bd-no f24 c2 fitw" type="number" flex-box="1" v-model.number="form.money"/>
            <span>元</span>
        </label>
        <p class="mt20 mb16 f16 text3 px14">选择充值金额</p>
        <checker v-model="form.money" default-item-class="checker corner" selected-item-class="selected"
                 :radio-required="true"
                 class="checker-box mt20">
            <checker-item :value="i" v-for="i in [100,200,300,500, 1000, 2000]" :key="i" class="mb10">
                <div class="h44" flex="main:center cross:center">{{i}}元</div>
            </checker-item>
        </checker>
        <m-button class="mx14 mt60" :class="{disabled: !form.money}" @click.native="submit">立刻充值：{{form.money || 0}}元
        </m-button>
    </page>
</template>
<script>
  import { getBrandWCPayRequest } from '@/common/jssdk'

  export default {
    data () {
      const {shopId, shopName, code: card} = this.$route.params
      console.log(this.$route.params)
      return {
        shopName,
        form: {
          shopId,
          card,
          money: 500
        }
      }
    },
    computed: {},
    methods: {
      getForm () {
        const {shopId, money, card} = this.form
        return {
          shopId, // 门店id
          totalFee: money * 100, // 金额
          card // 卡号
        }
      },
      async submit () {
        try {
          const form = this.getForm()
          const single = this.$store.getters.companyInfo.single // 是否单站
          let {code, obj: payRecordId} = await this.$post_loading('payRecord/addPayCordRetuenId', {
            ...form,
            type: 1,
            descript: 'IC充值',
            couponId: 0
          })

          let url = single ? 'pay/createPayByPlain' : 'pay/createPay'
          let {obj: config} = await this.$post_loading(url, {
            payRecordId,
            ...form,
          })

          // 确认后台收到付款, 每0.5秒查询一次， 查询10次
          const getState = async () => (await this.$get('payRecord/getPayRecordById', {id: payRecordId})).obj.isPay

          getBrandWCPayRequest(config, getState).then(() => {
            // 充值成功
            this.$router.push({
              name: 'petCard_record_success',
              query: {id: payRecordId}
            })
          }).catch((e) => {
            // 支付失败
            this.$router.push({
              name: 'refueling_fail', params: {
                description: e == 'cancel' ? '支付被取消' : JSON.stringify(e)
              }
            })
            throw e
          })
        } catch (e) {
          // 充值失败
          this.$router.push({
            name: 'petCard_record_fail',
            params: {
              description: JSON.stringify(e)
            }
          })
        }
      },
    },
    components: {}
  }
</script>
<style type="text/scss" lang="scss" scoped>
    @import '../../css/variable';

    .checker-box {
        overflow: hidden;
        $space: 6px;
        $padding: 12px;
        $padding: $padding +  $space * 2;
        padding: 0 $padding;
        .checker {
            position: relative;
            width: 33.33%;
            float: left;
            border: 1px solid $c2;
            color: $c2;
            &:nth-child(3n -2) {
                left: -$space;
            }
            &:nth-child(3n) {
                right: -$space;
            }
        }

        .selected {
            background-color: $c2;
            color: white;
        }
    }
</style>
